<template>
  <view class="notifications-container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 12H5"></path>
          <path d="M12 19l-7-7 7-7"></path>
        </svg>
      </view>
      <text class="title">提醒管理</text>
      <view class="placeholder"></view>
    </view>
    
    <!-- 提醒设置卡片 -->
    <view class="settings-card">
      <view class="description">
        <text>定制需要开启的功能，关闭后将不再提醒</text>
      </view>
      
      <!-- 提醒选项列表 -->
      <view class="notification-options">
        <!-- 待办清单 -->
        <view class="option-item">
          <text class="option-name">待办清单</text>
          <switch 
            :checked="notifications.todo" 
            @change="toggleNotification('todo')" 
            color="#7766E7"
            class="switch"
          />
        </view>
        
        <!-- 纪念日 -->
        <view class="option-item">
          <text class="option-name">纪念日</text>
          <switch 
            :checked="notifications.anniversary" 
            @change="toggleNotification('anniversary')" 
            color="#7766E7"
            class="switch"
          />
        </view>
        
        <!-- 备忘录 -->
        <view class="option-item">
          <text class="option-name">备忘录</text>
          <switch 
            :checked="notifications.memo" 
            @change="toggleNotification('memo')" 
            color="#7766E7"
            class="switch"
          />
        </view>
        
        <!-- 日记 -->
        <view class="option-item">
          <text class="option-name">日记</text>
          <switch 
            :checked="notifications.diary" 
            @change="toggleNotification('diary')" 
            color="#7766E7"
            class="switch"
          />
        </view>
        
        <!-- 记账 -->
        <view class="option-item">
          <text class="option-name">记账</text>
          <switch 
            :checked="notifications.accounting" 
            @change="toggleNotification('accounting')" 
            color="#7766E7"
            class="switch"
          />
        </view>
        
        <!-- 课程表 -->
        <view class="option-item">
          <text class="option-name">课程表</text>
          <switch 
            :checked="notifications.schedule" 
            @change="toggleNotification('schedule')" 
            color="#7766E7"
            class="switch"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notifications: {
        todo: true,
        anniversary: true,
        memo: false,
        diary: false,
        accounting: false,
        schedule: true
      }
    }
  },
  onLoad() {
    // 从本地存储加载设置
    this.loadSettings();
  },
  methods: {
    goBack() {
      console.log('返回按钮被点击');
      try {
        const pages = getCurrentPages();
        console.log('当前页面栈:', pages.length);
        
        if (pages.length > 1) {
          uni.navigateBack({
            delta: 1,
            success: function() {
              console.log('返回成功');
            },
            fail: function(err) {
              console.error('返回失败:', err);
              // 如果navigateBack失败，尝试使用switchTab或redirectTo
              uni.switchTab({
                url: '/pages/personal/personal'
              });
            }
          });
        } else {
          console.log('页面栈只有一个页面，使用switchTab');
          // 如果页面栈中只有一个页面，使用switchTab跳转到个人页面
          uni.switchTab({
            url: '/pages/personal/personal'
          });
        }
      } catch (e) {
        console.error('返回出错:', e);
        // 出错时尝试使用redirectTo
        uni.redirectTo({
          url: '/pages/personal/personal'
        });
      }
    },
    toggleNotification(type) {
      this.notifications[type] = !this.notifications[type];
      // 保存设置到本地存储
      this.saveSettings();
    },
    loadSettings() {
      try {
        const settings = uni.getStorageSync('notification_settings');
        if (settings) {
          this.notifications = JSON.parse(settings);
        }
      } catch (e) {
        console.error('加载设置失败', e);
      }
    },
    saveSettings() {
      try {
        uni.setStorageSync('notification_settings', JSON.stringify(this.notifications));
      } catch (e) {
        console.error('保存设置失败', e);
      }
    }
  }
}
</script>

<style lang="scss">
.notifications-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  
  .back-button {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: transparent;
    }
    
    &:active {
      opacity: 0.7;
    }
    
    svg {
      width: 40rpx;
      height: 40rpx;
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .placeholder {
    width: 60rpx;
  }
}

.settings-card {
  margin: 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .description {
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    text {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .notification-options {
    .option-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .option-name {
        font-size: 32rpx;
        color: #333;
      }
      
      .switch {
        transform: scale(0.9);
      }
    }
  }
}

/* 自定义开关样式 */
:deep(.uni-switch-input) {
  background-color: #7766E7 !important;
}

:deep(.uni-switch-input:before) {
  background-color: #ffffff !important;
}
</style>